<template>
    <el-dialog
            title="新建分析"
            :visible.sync="analyzeVisible"
            :close-on-click-modal="false"
            width="88%"
            style="top: -12%;"
            v-dialogDrag>
        <el-steps :active="active" finish-status="success" style="margin-top: 15px">
            <el-step title="步骤 1" icon="el-icon-edit"></el-step>
            <el-step title="步骤 2" icon="el-icon-edit"></el-step>
            <!--<el-step title="步骤 3" icon="el-icon-upload"></el-step>-->
        </el-steps>
        <div v-show="step1" style="margin-top: 10%;margin-left: 30%;height:500px">

        </div>
        <div v-show="step2" style="margin-top: 3%;height:500px">

        </div>
        <!--<div v-show="step3" style="width:50%;margin-left:25%;margin-top: 5%;margin-bottom: 6%">-->
        <!--<el-progress :text-inside="true" :stroke-width="24" :percentage="this.percentage"-->
        <!--:status="this.processStatus"></el-progress>-->
        <!--</div>-->
        <span slot="footer" class="dialog-footer">
            <el-button v-if="this.active===1" style="margin-top: 12px;" @click="previous">上一步</el-button>
            <el-button v-if="this.active==0" :disableds="this.dataCheck" tyle="margin-top: 12px;"
                       @click="next">下一步</el-button>
             <el-button v-if="this.active===1" :disableds="this.dataCheck" tyle="margin-top: 12px;"
                        @click="confirm">确定</el-button>
            <!--<el-button v-if="this.active === 2 " style="margin-top: 12px;"-->
            <!--@click="confirm">确  定</el-button>-->
            <!--<el-button @click="cancel">取 消</el-button>-->
        </span>
    </el-dialog>

</template>

<script>
    import axios from 'axios';

    export default {
        name: "analyzeDialog",

        data() {
            return {
                active: 0,
                analyzeVisible: false,
                step1: true,
                step2: false,
                dataCheck:false
            }
        },
        props: {},
        computed: {

        },
        methods: {
            previous() {
                if (this.active === 1) {
                    this.active = 0;
                    this.step1 = true;
                    this.step2 = false;

                } else if (this.active === 2) {

                }
            },
            cancel() {
                this.spatialVisible = false;
                this.active = 0;
                this.value = '';
                this.step1 = true;
                this.step2 = false;
            },
            next() {
                if (this.active === 0) {

                    this.active++;
                    this.step1 = false;
                    this.step2 = true;

                }
            },
            confirm() {
                this.$message({
                    type: 'succes',
                    message: '参数选择成功，到任务进度中查看分析进度'
                });
                this.analyzeVisible = false;
            },

        }
        ,
        created() {
            let that = this;
            this.$Bus.$on('analyzeVisible', params => {
                that.analyzeVisible = params.visible;
            });

        }

    }
</script>

<style>
    .step {
        margin: 20px
    }

    .el-input-number {
        width: 100% !important
    }


</style>